<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #app {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        min-width: 650px;
        overflow: hidden;
      }
      .content {
        width: 100%;
        border: 1px solid #00a383;
        height: calc(100% - 35px);
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
      }
      .nav {
        height: 40px;
        padding-left: 15px;
        line-height: 40px;
        font-weight: bold;
        color: #00a383;
        border-bottom: 3px solid #00a383;
      }
      .search {
        float: right;
        width: 300px;
        height: 25px;
        margin-top: 5px;
      }
      .btn {
        float: right;
        margin-left: 30px;
        margin-right: 40px;
        margin-top: 5px;
        width: 80px;
        height: 29px;
      }
      .list {
        height: calc(100% - 45px);
        overflow: auto;
        flex: 0 0 200px;
      }
      .item {
        padding-left: 15px;
        line-height: 30px;
        cursor: pointer;
        transition: all 0.5s;
      }
      .active,
      .item:hover {
        color: #fff;
        background-color: #00a383 !important;
      }
      .item:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.1);
      }
      .info {
        display: inline-block;
        flex: 1 1 auto;
        height: 100%;
        overflow: auto;
      }
      .name {
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #cccccc;
        font-weight: bold;
        margin-top: 15px;
      }
      .tags,
      .story {
        padding: 30px;
      }
      .tags > span {
        margin-right: 30px;
      }
      .img {
        margin: 15px 0;
        text-align: center;
        max-height: 45%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .imgChangeBtn {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 30px;
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.5s;
      }
      .imgChangeBtn:hover {
        opacity: 1;
      }
      .btnLeft {
        background: no-repeat center center
          url();
      }
      .btnRight {
        background: no-repeat center center
          url();
      }
      .img > img {
        width: 50%;
        height: 100%;
        object-fit: cover;
      }
      .noData {
        margin-top: 30px;
        text-align: center;
      }
      h5 {
        font-style: 14px;
      }
      .img1 {
        width: 120px;
        height: 120px;
        margin: 10px 47%;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="nav">
        <span>英雄列表</span>
        <button class="btn" @click="search">搜 索</button>
        <input
          class="search"
          placeholder="请输入英雄名称进行搜索"
          type="text"
          v-model="inputValue"
          @keyup.enter="search"
        />
      </div>
      <div class="content" v-if="currIndex != -1">
        <ul class="list">
          <li
            class="item"
            :class="{active:index==currIndex}"
            @click="liclick(index)"
            v-if="item.name.includes(searchVal)"
            v-for="(item, index) in hero"
            :key="index"
          >
            {{item.name}}
          </li>
        </ul>
        <div class="info">
          <div class="name">英雄姓名:{{info.name}}</div>
          <img class="img1" :src="info.iconUrl" />
          <div class="img">
            <img :src="info.img" />
          </div>
          <div class="tags">
            <h5>英雄特征:</h5>
            <span v-for="(item, index) in info.roles" :key="index"
              >{{item}}</span
            >
          </div>
          <div class="story" v-html="info.story">英雄故事</div>
        </div>
      </div>
      <div class="noData" v-else>暂无数据</div>
    </div>

    <script src="./vue.js"></script>
    <script src="./axios.js"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          inputValue: '',
          searchVal: '',
          heroIndex: 0,
          hero: [],
          currIndex: 0,
          info: ''
        },
        methods: {
          getinfo () {
            axios({
              url: 'https://autumnfish.cn/api/lol/info',
              method: 'get',
              params: { id: this.hero[this.currIndex].id }
            }).then(res => {
              //成功回调

              this.info = res.data.data
              console.log(this.info)
            })
          },
          search () {
            this.searchVal = this.inputValue
            this.currIndex = this.hero.findIndex(item => {
              return item.name.includes(this.searchVal)
            })
            this.getinfo()
            console.log(this.currIndex)
          },
          liclick(index){
            this.currIndex = index
            this.getinfo()
          }
        },
        computed: {},
        created () {
          axios({
            url: 'https://autumnfish.cn/api/lol/search'
          }).then(res => {
            //成功回调
            // console.log(res)
            this.hero = res.data.data
            this.getinfo()
          })
        }
      })
    </script>
  </body>
</html>
